<script setup>
import { onBeforeUpdate, onMounted, onUpdated } from 'vue';

    const count = ref(0)

    const pRef = ref(null)

    /**
     * 生命周期
     */
    console.log('setup.......')

    onBeforeMount(() => {
        console.log('onBeforeMount........')
    })

    onMounted(() => {
        console.log('onMounted........')
        console.log(pRef.value) // 获取DOM元素
    }) 

    onBeforeUpdate(() => {
        console.log('onBeforeUpdate........')
    })

    onUpdated(() => {
        console.log('onUpdated........')
    })

    onBeforeUnmount(() => {
        console.log('onBeforeUnmount........')
    })

    onUnmounted(() => {
        console.log('onUnmounted........')
    })

   
</script>

<template>  
    <p ref="pRef">{{ count }}</p>
    <button @click="count++">修改count</button>
</template>

<style scoped>

</style>